<template>
    <view class="app">
        <!-- <view class="title-img">
            <view class="activity-time">活动时间：2020.10.10 - 2020.10.10</view>
        </view> -->
        
        <view class="turntable">
            <view class="bg" :style="{transform:`rotate(${turnDeg}deg)`,webkitTransition:isTransition?`transform ${turnTime}s ease`:''}">
                <view class="item" v-for="(item,index) in shopList" :key="index" :style="{transform: `translateX(-50%) rotate(${index*45+22.5}deg)`}">
                    <view style="width: 1.4rem;height:1.4rem;margin: 0 auto">
                        {{item.id}}
                    </view>
                </view>
            </view>
            <view class="pointer" @click="startPlay">
                <view class="pointer-txt">点击<br />抽奖</view>
            </view>
            <view class="prompt">
                当前可抽奖次数：{{drawsNumber}}次
            </view>
        </view>

        <view :class="['invite',invitationsNumber!=0?'bg-c1':'bg-c2']" @click="inviteFriends">
            {{invitationsNumber!=0?'邀请好友获得额外次数':'分享次数已用完'}}
        </view>
        
        <!-- <view class="rule">
            <h4>活动规则</h4>
            <p v-html="html" class="txt"></p>
        </view> -->

        <!-- 弹窗 -->
        <view class="prompt-window" @touchmove.stop.prevent v-if="isWindow">
            <block v-if="windowTypes==1">
                <view :class="['window-bg',transitionIsWindow?'scalec-enter-active':'scalec-leave-active']">
					<image class="awarded-shop" src="/static/lottery/apple.png" mode="aspectFill"></image>
                    <view class="window-bg-top-img">
                        <p>有效期：2020.01.01-2020.02.01</p>
                        <p>请到中奖记录里进行查看</p>
                        <p class="btn">去查看</p>
                    </view>
                </view>
				<image class="close" src="/static/lottery/close.png" mode="aspectFill" @click="closeBtn"></image>
            </block>
            
            <block v-if="windowTypes==2">
                <view :class="['tips-window-bg',transitionIsWindow?'scalec-enter-active':'scalec-leave-active']">
                    <h3>温馨提示</h3>
                    <p class="con-txt">你已参加本次活动，若要再次获得参与机会可邀请好友</p>
                    <p class="tips-btn" @click="closeBtn">我知道了</p>
                </view>
            </block>
        </view>
    </view>
</template>

<script>
export default {
    data(){
        return{
            channel: 0,                     // 0 公众号 3 小程序
            mid:'',                         // 用户id
            activityId:1,                   // 活动id

            isStart:true,                   // 是否开始抽奖
            turnTime:5,                     // 旋转时间 s
            turnDeg:0,                      // 旋转度数
            turnNumber:5,                   // 旋转圈数
            id:1,                           // 第几个商品被选中
            isTransition:true,              // 是否有过渡效果
            drawsNumber:1,                  // 抽奖次数
			isPlay:true,					// 是否还有抽奖次数
            invitationsNumber:1,            // 邀请次数
            shopList:[
				{id:8},
				{id:7},
				{id:6},
				{id:5},
				{id:4},
				{id:3},
				{id:2},
				{id:1},
			],
            html:`<view>
            123465
            </view>`,
            windowTypes:1,                  // 弹窗类型 1 中奖提示 2 温馨提示
            isWindow:false,                 // 是否显示弹窗
            transitionIsWindow:false,       // 控制窗口过渡动画的的样式
            tipsWindow:false,               // 温馨提示弹窗
        }
    },
    mounted(){
		
    },
    methods:{
        random(){
            let num = Math.random() 
            num = Math.ceil(num * 8)    // 随机数 1 - 8 的随机数
            return num
        },
        startPlay(){ 
            if(this.isStart&&this.drawsNumber>0){
                this.drawsNumber--
                this.isStart = false
                let random = this.random()                                  // 一到八的随机数
                console.log(random,'模拟一到八的哪个会中奖')
                this.isTransition = true
                let winDeg = (360 / 8) * random - 22.5                      // 中奖的度数

                let turnDeg = 360 * this.turnNumber + winDeg
                this.turnDeg = turnDeg
                setTimeout(() => {
                    this.isStart = true
                    this.isTransition = false
                    this.turnDeg = winDeg
                    this.windowTypes=1
                    this.transitionIsWindow = true
                    this.isWindow=true
					if(this.drawsNumber==0){
						this.isPlay=false
					}
                    // alert(`id:${random}中奖了`)
                },this.turnTime * 1000 + 1);
            }else{
				if(this.isPlay){
					console.log('防止重复点击 抽奖请求')
				}else{
					this.windowTypes=2
					this.isWindow = true
					this.transitionIsWindow = true
				}                
            }
        },
        // 邀请朋友 
        inviteFriends(){
            console.log('邀请朋友')
            if(this.invitationsNumber>0){
				this.isPlay = true
                this.drawsNumber ++
                this.invitationsNumber --
            }
            
        },
        closeBtn(){
            this.transitionIsWindow = false
            setTimeout(()=>{
                this.isWindow=false 
            },290)
           
        },
        go(path) {
            this.$router.push({path})
        }
    }
}
</script>

<style lang="scss" scoped>
.app{min-height: 100vh;width: 100%;background: url('@/static/lottery/bg.jpg') no-repeat top center / cover;padding: 200rpx 0 86rpx;overflow: hidden;font-family: PingFang SC, PingFang SC-Bold;box-sizing: border-box;}
.logo{width: 226rpx;height: 104rpx;position: absolute;left: 50%;transform: translateX(-50%);top: -14rpx;}
.winning-record{position: absolute;right: -48rpx;width: 262rpx;height: 84rpx;top: 90rpx;}
.title-img{width: 750rpx;height: 312rpx;margin: 0 auto;background: url('@/static/lottery/txt.png') no-repeat center center / cover;position: relative;
    .activity-time{background: rgba(120,34,230,.8);height: 72rpx;width: 512rpx;border-radius: 36rpx;color: #fff;line-height: 72rpx;font-size: 28rpx;text-align: center;margin-top: 16rpx;position: absolute;left: 50%;transform: translateX(-50%);bottom: -16rpx;}
}

.turntable{background: url('@/static/lottery/bg.png') no-repeat center center / cover;height: 750rpx;width: 750rpx;margin:  0 auto;display: flex;align-items: center;justify-content: center;position: relative;
    .bg{width: 100%;height: 100%;background: url('@/static/lottery/top-bg.png') no-repeat center center / cover;width: 592rpx;height: 592rpx;position: relative;
        .item{padding: 18rpx;width: 222rpx;height: 290rpx;position: absolute;left: 50%;transform-origin:50% 92%;text-align: center;font-size: 36rpx}
    }
    .pointer{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 236rpx;height: 274rpx;background: url('@/static/lottery/pointer.png') no-repeat center center / cover;
        .pointer-txt{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-30%);color: #fff;font-size: 32rpx;letter-spacing: 2rpx}
    }
    .prompt{font-size: 32rpx;color: #fff;text-align: center;position: absolute;left: 50%;transform: translateX(-50%);bottom: -22rpx;}
}
.invite{font-size: 36rpx;color: #fff;width: 560rpx;height: 88rpx;border-radius: 44rpx;line-height: 88rpx;text-align: center;margin: 56rpx auto 0;
    &.bg-c1{background: linear-gradient(#FEC61F,#E65200);}
    &.bg-c2{background: linear-gradient(#FEE28D,#F3A87E);}
}

.rule{padding: 88rpx 38rpx 0;
    h4{text-align: center;color: #fff;position: relative;font-size:32rpx;line-height: 44rpx;font-weight: 500;
        &::after{content: '';display: block;clear: both;width: 256rpx;border-top: 2rpx dashed #fff;position: absolute;top: 50%;transform: translateY(-50%);left: 0;}
        &::before{content: '';display: block;clear: both;width: 256rpx;border-top: 2rpx dashed #fff;position: absolute;top: 50%;transform: translateY(-50%);right: 0;}
    }
    .txt{color: #fff;}
}

.prompt-window{position: fixed;top: 0;right: 0;bottom: 0;left: 0;background: rgba($color: #000000, $alpha: .6);display: flex;flex-direction: column;align-items: center;justify-content: center;color: #fff;
    .window-bg{width: 600rpx;height: 906rpx;background: url('@/static/lottery/window-bg.png') no-repeat center center / cover;position: relative;
        .awarded-shop{position: absolute;left: 50%;transform: translateX(-50%);width: 406rpx;height: 406rpx;top: 326rpx}
        .window-bg-top-img{position: absolute;bottom: 0;right: 0;left: 0;text-align: center;font-size: 24rpx;background: url('@/static/lottery/window-bg-top-img.png') no-repeat center center / cover;height: 270rpx;padding-top: 82rpx;box-sizing: border-box;
            p{margin-bottom: 4rpx;}
            .btn{width: 420rpx;height: 88rpx;line-height: 88rpx;background: #FDE41D;border-radius: 44rpx;margin: 0 auto;color: #333;font-size: 36rpx;margin-top: 6rpx}
        }
    }
    .close{width: 60rpx;height: 60rpx;margin-top: 72rpx}
    // 提示弹窗
    .tips-window-bg{width: 600rpx;height: 328rpx;background: url('@/static/lottery/tips-bg.png') no-repeat center center / cover;padding: 24rpx 64rpx;box-sizing: border-box;display: flex;flex-direction: column;
        h3{font-size: 36rpx;color: #fff;font-weight: 500;margin-bottom: 16rpx;text-align: center;}
        .con-txt{font-size: 30rpx;color: #fff;flex: 1}
        .tips-btn{width: 420rpx;height: 88rpx;line-height: 88rpx;background: #FDE41D;border-radius: 44rpx;margin: 0 auto;text-align: center;color: #333333}
    }
}

/***放大动画3***/
.scalec-enter-active {animation: scalec1 0.3s cubic-bezier(.17,.84,.44,1);}
.scalec-leave-active {animation: scalec2 0.3s cubic-bezier(.17,.84,.44,1);}
@keyframes scalec1 {0%{transform: scale(0); opacity: 0;}100%{transform: scale(1); opacity: 1;}}
@keyframes scalec2 {0%{ transform: scale(1) ;opacity:1;}100%{transform: scale(0); opacity: 0;}}
</style>

